<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>modal</title>
    <style>
        p,h4{margin:0; } 
        .modal{width: 500px; background-color: #fff; border: 1px solid rgba(0,0,0,.2); border-radius: 6px; box-shadow: 0 3px 9px rgba(0,0,0,.5); }
        .modal-header {padding: 15px; border-bottom: 1px solid #e5e5e5; }
        .modal-content div {padding: 20px; }
        .modal-footer {padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; }
        .btn {padding: 5px 15px; border: none; outline: none;cursor:pointer; }
        .blue {color: #fff; background-color: #39f; border-color: #39f; }
    </style>
    <script src="../../2.1.8/vue.js"></script>
</head>
<body>
    <div id="app">
        <m-modal modal-title="这是一个提醒" ></m-modal>

        <m-modal>
            <ul slot="modal-content">
                <li v-for="item in list">{{ item }}</li>
            </ul>
            <div slot="modal-footer">
                <span @click="verfify2">确定</span>
                <span @click="cancel2">取消</span>
                <span>重置</span>
            </div>
        </m-modal>
    </div>
    <script>
       /*
            自定义组件，理清组件的各部分功能，进行个性化定制
            注意父组件向子组件传值的时候，自定义属性为烤串形式，子组件接收时使用驼峰形式

            在 slot 中父组件如果需要传事件给 子组件，直接在父组件的html结构中，给相应的元素绑定事件即可。
            与 props 传数据，有区别

       */
        Vue.component('m-modal',{
            props : {
                modalTitle : {
                    type : String,
                    default : '这是一个模态框'
                }
            },
            template : `
                <div class="modal">
                    <div class="modal-header">
                        <h4>{{modalTitle}}</h4>
                    </div>
                    <div class="modal-content">
                        <div>
                            <slot name="modal-content">这是主题内容</slot>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <slot name="modal-footer">
                            <input class="btn blue" type="button" value="确定" @verfify="verfify"/>
                            <input class="btn" type="button" value="取消" @cancel="cancel"/>
                        </slot>
                    </div>
                </div>
            `,
            methods : {
                verfify(event){
                    this.$emit('verfify','用户点击了确认按钮，请指示');
                },
                cancel(){
                    this.$emit('cancel','用户点击了取消按钮，请指示');
                }
            }
        });
        var vm = new Vue({
            el : '#app',
            data : {
                list : [...'妙味课堂']
            },
            methods : {
                verfify( msg ){
                    alert( msg );
                },
                cancel( msg ){
                    alert( msg );
                },
                verfify2( msg ){
                    alert( '确定了，父组件事件' );
                },
                cancel2( msg ){
                    alert( '取消了，父组件事件' );
                }
            }
        }); 
    </script>
</body>
</html>